<template>
  <!-- 通用banner 开始 -->
  <swiper :options="swiperOption" ref="mySwiper" class="public-banner">
    <!-- slides -->
    <swiper-slide v-for="(item,index) in bannerList" :key="index">
      <div class="public-bannerBox">
        <div class="public-bannerBoxMiddle">
          <!-- <img
            src="@images/banner1_wenzi@2x.png"
            swiper-animate-effect="fadeInLeft"
            swiper-animate-duration="0.8s"
            swiper-animate-delay="0.3s"
            class="public-bannerImg1 ani"
          >-->
          <div class="public-bannerText1">
            <p
              swiper-animate-effect="fadeInLeft"
              swiper-animate-duration="0.8s"
              swiper-animate-delay="0.3s"
              class="ani"
            >2019最新课程</p>
            <p
              swiper-animate-effect="zoomInDown"
              swiper-animate-duration="0.8s"
              swiper-animate-delay="0.3s"
              class="ani"
            >{{item.title}}</p>
            <p
              swiper-animate-effect="zoomInDown"
              swiper-animate-duration="0.8s"
              swiper-animate-delay="0.3s"
              class="ani"
            >FAMILY VOCATIONAL EDUCATION INSTRUCTOR</p>
            <p
              swiper-animate-effect="zoomInUp"
              swiper-animate-duration="0.8s"
              swiper-animate-delay="0.3s"
              class="ani"
            >职业能力认证培训</p>
          </div>
          <!-- <img
            src="@images/banner1_bannerchahua@2x.png"
            swiper-animate-effect="fadeInRight"
            swiper-animate-duration="0.8s"
            swiper-animate-delay="0.3s"
            class="public-bannerImg1 ani"
          > -->
          <img
            :src="item.picture"
            swiper-animate-effect="fadeInRight"
            swiper-animate-duration="0.8s"
            swiper-animate-delay="0.3s"
            class="public-bannerImg1 ani"
          >
          <div
            swiper-animate-effect="rollIn"
            swiper-animate-duration="0.8s"
            swiper-animate-delay="0.3s"
            class="public-bannerButton1 ani"
            @click="getPoint(item)"
          >
            立即学习
            <i class="iconfont dc-icon-play1"></i>
          </div>
        </div>
        <img src="@images/banner1_bg@2x.png" class="public-bannerBg">
      </div>
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination" slot="pagination"></div>
    <!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
  </swiper>
  <!-- 通用banner 结束 -->
</template>

<script>
import banner from "./index.js";
export default banner;
</script>

<style lang="scss" >
@import "./index.scss";
</style>